class Bcar{
    constructor(){
        this.ctable=document.querySelector('.cartTable')
        this.tb=document.querySelector('tbody')
        this.sall=document.querySelector('.selectAll')
        this.dall=document.querySelector('.dlAll')
        this.tnum=document.querySelector('.totalNum')
        this.money=document.querySelector('.money')
        this.calc=document.querySelector('.calc')
        this.blist=JSON.parse(localStorage.getItem('car')) || []
        this.render()
        this.main()
    }
    render(){
        if(this.blist.length>0){
            this.tb.innerHTML=''
           this.blist.forEach(item => {
            this.tb.innerHTML+=`
            <tr>
            <td><input type="checkbox" value="" class="select" data-id="${item.id}" ${item.is_select?'checked':''} /></td>
            <td>
                <img src="${item.url}" >
                <span class="hide">${item.title}</span>
            </td>
            <td><span>${item.price}</span></td>
            <td>
                <span class="sub" data-id="${item.id}">-</span>
                <input type="text" value="${item. cart_number}" class="txt" data-id="${item.id}"/>
                <span class="add" data-id="${item.id}">+</span>
            </td>
            <td><span class="price">${(item.price * item.cart_number).toFixed(2)}喜点</span></td>
            <td><span class="del" data-id="${item.id}">删除</span></td>
            </tr>
            `
           });
        }else{
            this.tb.innerHTML=`
            <tr height="100">
            <td colspan="6">
                <h1>你啥都没买啊？<a href="./pindao.html">Go</a></h1>
            </td>
           </tr>
            `
        }
        this.count()
        this.changenum()
        localStorage.setItem('car',JSON.stringify(this.blist))
    }
    main(){
        this.ctable.onclick=(e)=>{
            var e = e || window.event
            var target = e.target || e.srcElement
            if(target.className=='selectAll'){
                this.blist.forEach((item)=>{
                    item.is_select=target.checked
                })
                this.render()
            }
            if(target.className=='select'){
                let tid=target.dataset.id
                let goods = this.blist.find((item) => {
                    return item.id == tid
                })
                goods.is_select=target.checked
                this.render()
            }
            if(target.className=='add'){
                let tid=target.dataset.id
                let goods = this.blist.find((item) => {
                    return item.id == tid
                })
                if(goods.cart_number==10){
                    alert('你最多只能买10个该商品')
                }else{
                    goods.cart_number++
                }
                this.render()
            }
            if(target.className=='sub'){
                let tid=target.dataset.id
                let goods = this.blist.find((item) => {
                    return item.id == tid
                })
                if(goods.cart_number<=1){
                 goods.cart_number=1
                }else{
                    goods.cart_number--
                }
                this.render()
            }
            if(target.className=='del'){
                let tid=target.dataset.id
                let goods = this.blist.find((item) => {
                    return item.id == tid
                })
                if(goods.is_select){
                    if(confirm('确定删除吗？')){
                        this.blist=this.blist.filter((item)=>{
                            return item.id != tid
                        })
                    }
                    
                }
                this.render()
            }
            if (target.className == 'dlAll') {
                if (confirm('确定要删除这些商品ma？')) {
                    this.blist = this.blist.filter((item) => {
                        return !item.is_select
                    })
                }
                this.render()

            }
            if (target.className == 'calc') {
                //  if(this.totalNum.innerHTML)  
                if (this.totalNum.innerHTML > 0) {
                      location.href = "apply.html"  
                }
            }
        }
    }
    count() {
        let x=0
        let y=0
        this.blist.forEach((item)=>{
            x+=Number(item.cart_number)
            y+=item.price*item.cart_number
        })
        this.tnum.innerHTML=x
        this.money.innerHTML=y.toFixed(2)
        this.sall.checked=this.blist.every((res)=>{
            return res.is_select
        })
    }
    changenum(){
        this.inp=document.querySelectorAll('.txt')
        console.log(this.inp)
        this.inp.forEach((item)=>{
            item.onblur=()=>{
                let tid=item.dataset.id
                let goods=this.blist.find((res)=>{
                    return res.id==tid
                })
                goods.cart_number=item.value
                goods.cart_number=Number(  goods.cart_number)
                console.log(typeof(goods.cart_number))
                if(goods.cart_number>10){
                    goods.cart_number=10
                }else if(goods.cart_number>0 && goods.cart_number<10){
                    goods.cart_number=item.value
                }else{
                    goods.cart_number=1
                }
                this.render()
            }
        })
       
    }
}
new Bcar()
